<template>
	<view class="list-cont">
		<view class="list-title flex vertical-center">推荐视频</view>
		<view class="list">
			<block v-for="(item, index) in list" :key="index">
				<view class="item">
					<video-item :item="item" @paly="onPaly"  />
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	import videoItem from "@/components/video-item/video-item.vue";
	
	export default {
		components:{
			videoItem
		},
		props: {
			list: Array
		},
		data() {
			return {}
		},
		methods: {
			onPaly(e) {
				this.$emit("paly", e)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.list-cont{
		padding-bottom: 20rpx;
		.list-title{
			color: $color-red;
			font-size: 26rpx;
			height: 44rpx;
			background-size: 51rpx 44rpx;
			background-repeat: no-repeat;
			background-position: 0 0;
			background-image: url(../../../static/icon/video.png);
			padding-left: 70rpx;
			margin: 0 26rpx;
			margin-bottom: 30rpx;
		}
		.list{
			display: flex;
			flex-wrap: wrap;
			.item{
				margin: 0 35rpx;
				margin-bottom: 27rpx;
			}
		}
	}
</style>
